@use '../../style' as theme;
@use '../../style/mixins' as mixins;

$btn-prefix-cls: '#{theme.$prefix}-btn';
$icon-prefix-cls: '#{theme.$prefix}-icon';

.#{$btn-prefix-cls} {
  @include mixins.btn;

  // -------------------  button 类型  start ---------------- //
  &-primary {
    @include mixins.color(theme.$btn-primary-border-color, theme.$btn-primary-background-color, theme.$btn-primary-font-color);

    &:hover:not(.#{$btn-prefix-cls}-loading) {
      background-color: #{theme.$btn-primary-hover-background-color};
      border-color: #{theme.$btn-primary-hover-border-color};
      color: #{theme.$btn-primary-hover-font-color};
    }
    &:active:not(.#{$btn-prefix-cls}-loading) {
      border-color: #{theme.$btn-primary-active-border-color};
      background-color: #{theme.$btn-primary-active-background-color};
      color: #{theme.$btn-primary-hover-font-color};
    }
    &:disabled {
      border-color: #{theme.$btn-primary-disabled-border-color};
      background-color: #{theme.$btn-primary-disabled-background-color};
      color: #{theme.$btn-primary-hover-font-color};
    }
  }

  &-secondary {
    @include mixins.color(theme.$btn-primary-border-color, theme.$btn-primary-background-color, theme.$btn-primary-font-color);

    &:hover:not(.#{$btn-prefix-cls}-loading) {
      background-color: #{theme.$btn-secondary-hover-background-color};
      border-color: #{theme.$btn-secondary-hover-border-color};
      color: #{theme.$btn-secondary-hover-font-color};
    }
    &:active:not(.#{$btn-prefix-cls}-loading) {
      border-color: #{theme.$btn-secondary-active-border-color};
      background-color: #{theme.$btn-secondary-active-background-color};
      color: #{theme.$btn-secondary-hover-font-color};
    }
    &:disabled {
      border-color: #{theme.$btn-secondary-disabled-border-color};
      background-color: #{theme.$btn-secondary-disabled-background-color};
      color: #{theme.$btn-secondary-hover-font-color};
    }
  }

  &-ghost {
    @include mixins.color(theme.$btn-ghost-border-color, theme.$btn-ghost-background-color, theme.$btn-ghost-font-color);

    &:hover:not(.#{$btn-prefix-cls}-loading) {
      background-color: #{theme.$btn-ghost-hover-background-color};
      border-color: #{theme.$btn-ghost-hover-border-color};
      color: #{theme.$btn-ghost-hover-font-color};
    }
    &:active:not(.#{$btn-prefix-cls}-loading) {
      border-color: #{theme.$btn-ghost-active-border-color};
      background-color: #{theme.$btn-ghost-active-background-color};
      color: #{theme.$btn-ghost-active-font-color};
    }
    &:disabled {
      border-color: #{theme.$btn-ghost-disabled-border-color};
      background-color: #{theme.$btn-ghost-disabled-background-color};
      color: #{theme.$btn-ghost-disabled-font-color};
    }
  }

  &-text {
    @include mixins.color(theme.$btn-text-border-color, theme.$btn-text-background-color, theme.$btn-text-font-color);

    &:hover:not(.#{$btn-prefix-cls}-loading) {
      background-color: #{theme.$btn-text-hover-background-color};
      border-color: #{theme.$btn-text-hover-border-color};
      color: #{theme.$btn-text-hover-font-color};

      .#{$icon-prefix-cls} {
        color: theme.$btn-text-hover-font-color;
      }
    }

    &:active:not(.#{$btn-prefix-cls}-loading) {
      border-color: #{theme.$btn-text-active-border-color};
      background-color: #{theme.$btn-text-active-background-color};
      color: #{theme.$btn-text-active-font-color};

      .#{$icon-prefix-cls} {
        color: theme.$btn-text-active-font-color;
      }
    }

    &:disabled {
      border-color: #{theme.$btn-text-disabled-border-color};
      background-color: #{theme.$btn-text-disabled-background-color};
      color: #{theme.$btn-text-disabled-font-color};

      .#{$icon-prefix-cls} {
        color: theme.$btn-text-disabled-font-color;
      }
    }

    .#{$icon-prefix-cls} {
      color: theme.$btn-text-font-color;
    }
  }

  &-link {
    @include mixins.color(theme.$btn-link-border-color, theme.$btn-link-background-color, theme.$btn-link-font-color);

    &:hover:not(.#{$btn-prefix-cls}-loading) {
      background-color: #{theme.$btn-link-hover-background-color};
      border-color: #{theme.$btn-link-hover-border-color};
      color: #{theme.$btn-link-hover-font-color};
    }
    &:active:not(.#{$btn-prefix-cls}-loading) {
      border-color: #{theme.$btn-link-active-border-color};
      background-color: #{theme.$btn-link-active-background-color};
      color: #{theme.$btn-link-hover-font-color};
    }
    &:disabled {
      border-color: #{theme.$btn-link-disabled-border-color};
      background-color: #{theme.$btn-link-disabled-background-color};
      color: #{theme.$btn-link-hover-font-color};
    }
  }

  // 小号尺寸按钮
  &-size-small {
    @include mixins.component-size(theme.$btn-small-height, theme.$btn-small-font-size, theme.$btn-small-padding-vertical, theme.$btn-small-padding-horizontal, theme.$btn-small-min-width);

    &.#{$btn-prefix-cls}-icon-only {
       font-size: theme.$btn-icon-small-font-size;
       padding: 0 theme.$btn-icon-padding-horizontal;
       display: inline-flex;
       justify-content: center;
       align-items: center;
    }

    .#{$btn-prefix-cls}-group-basic-icon {
      font-size: theme.$btn-icon-small-font-size;
    }
  }

  // 中号尺寸按钮
  &-size-middle {
    @include mixins.component-size(theme.$btn-middle-height, theme.$btn-middle-font-size, theme.$btn-middle-padding-vertical, theme.$btn-middle-padding-horizontal, theme.$btn-middle-min-width);

    &.#{$btn-prefix-cls}-icon-only {
       font-size: theme.$btn-icon-middle-font-size;
       padding: 0 theme.$btn-icon-padding-horizontal;
       display: inline-flex;
       justify-content: center;
       align-items: center;
    }

    .#{$btn-prefix-cls}-group-basic-icon {
         font-size: theme.$btn-icon-middle-font-size;
    }
  }

  // 大号尺寸按钮
  &-size-large {
    @include mixins.component-size(theme.$btn-large-height, theme.$btn-large-font-size, theme.$btn-large-padding-vertical, theme.$btn-large-padding-horizontal, theme.$btn-large-min-width);

    &.#{$btn-prefix-cls}-icon-only {
        font-size: theme.$btn-icon-large-font-size;
        padding: 0 theme.$btn-icon-padding-horizontal;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    .#{$btn-prefix-cls}-group-basic-icon {
        font-size: theme.$btn-icon-large-font-size;
    }
  }

  /**
  icon图标包裹容器
   */
  &-icon-wrapper {
    padding: 0 theme.$btn-icon-padding-horizontal;
    vertical-align: middle;
  }
  // -------------------  button 类型  end ---------------- //
}
